<template>
	<view>
		<!-- 自定义tab导航栏横向组件（非原生） -->
	<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap"></swiper-tab-head>
		<view class="uni-tab-bar">
		<swiper class="swiper-box"  :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange" >
			<swiper-item  v-for="(items,index) in newlist" :key="index">
				<!-- @scrolltolower这个是触底事件 -->
				<scroll-view scroll-y class="list" @scrolltolower="loadmores(index)">
					<template v-if="items.list.length>0">
						<!-- 图文列表 -->
							<block v-for="(item,index1) in items.list" :key="index1">
								<!-- 列表组件 -->
							<indexList :item="item" :index="index1"></indexList>
							
							</block> 
							<!-- 上拉刷新 -->
						<loadMore :loadtext="items.loadtext"></loadMore>
					</template>
			<template v-else>
				<!-- 无内容 默认的地方-->
				<noThing></noThing>
				</template>
				</scroll-view>
			</swiper-item>
			
		</swiper>
		</view>
		
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";
	import swiperTabHead from "../../components/index/swiper-tab.vue";
	import loadMore from "../../components/common/load-more.vue";
	import noThing from "../../components/common/nothing.vue";
	export default {
		data() {
			return {
				
				a:'u00355rzi2',
				swiperheight:500,
				tabindex:0,
				tabBars: [{
				    name: '关注',
				    id: 'guanzhu'
				},
				{
				    name: '推荐',
				    id: 'tuijie'
				},
				{
				    name: '体育',
				    id: 'tiyu'
				},
				{
				    name: '热点',
				    id: 'redian'
				},
				{
				    name: '热门',
				    id: 'remen'
				},
				{
				    name: '时事',
				    id: 'shishi'
				}
				],
				newlist:[
					{
						loadtext:"上拉加载更多",
					list:[
						
						{
						userpic:"../../static/srcc/touxiang.jpg",
						username:"天空",
						isguanzhu:false,
						title:"开开心心敲代码就对了",
						type:"video",
						titlepic:"../../static/srcc/2.jpg",
						playnum:20000,
						long:1.21,
						infonum:{
							index:1,
							ding:11,
							cai:11	
						},
						commentnum:10,
						sharenum:10
						},
						{
							userpic:"../../static/srcc/2.jpg",
							username:"Vincent",
							isguanzhu:false,
							title:"快快乐乐敲代码就对了",
							type:"video",
							titlepic:"../../static/srcc/3.jpg",
							playnum:20001,
							long:1.22,
							infonum:{
								index:0,
								ding:11,
								cai:11
								
							},
							commentnum:10,
							sharenum:10
						}]
						
						
					},
					{
						loadtext:"上拉加载更多",
						list:[{
						userpic:"../../static/srcc/2.jpg",
						username:"Vincent",
						isguanzhu:false,
						title:"快快乐乐敲代码就对了",
						type:"video",
						titlepic:"../../static/srcc/3.jpg",
						playnum:20001,
						long:1.22,
						infonum:{
							index:0,
							ding:11,
							cai:11
							
						},
						commentnum:10,
						sharenum:10
					}]
					},
					{
						loadtext:"上拉加载更多",
						list:[{
						userpic:"../../static/srcc/2.jpg",
						username:"Vincent",
						isguanzhu:false,
						title:"快快乐乐敲代码就对了",
						type:"video",
						titlepic:"../../static/srcc/3.jpg",
						playnum:20001,
						long:1.22,
						infonum:{
							index:0,
							ding:11,
							cai:11
							
						},
						commentnum:10,
						sharenum:10
					}]
					},
					{
						loadtext:"上拉加载更多",
						list:[{
						userpic:"../../static/srcc/2.jpg",
						username:"Vincent",
						isguanzhu:false,
						title:"快快乐乐敲代码就对了",
						type:"video",
						titlepic:"../../static/srcc/3.jpg",
						playnum:20001,
						long:1.22,
						infonum:{
							index:0,
							ding:11,
							cai:11
							
						},
						commentnum:10,
						sharenum:10
					}]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					},
					{
						loadtext:"上拉加载更多",
						list:[]
					}
					],
					
					}
					
				
			},
			//监听函数是监听搜索框点击的时间
			onNavigationBarSearchInputClicked() {
				console.log("打开搜索页面")
				uni.navigateTo({
					url:'../search/search'
				})
				
			},
		
		methods: {
			
			// 点击事件
			tabtap(index){
				console.log(index);
				this.tabindex=index;
			}
			,
			//滑动事件
			tabChange(e) {
				console.log(JSON.stringify(e.detail) )
			 this.tabindex=e.detail.current;
			},
			//上拉加载事件
			loadmores(index){
				//如果目前全等于加载更多我们就给他这个事件，不然就return
				if(this.newlist[index].loadtext!="上拉加载更多"){return;}
				//修改状态
						this.newlist[index].loadtext="加载中...";
						//获取数据
				setTimeout(()=> {
					//获取完成
					let obj ={
							userpic:"../../static/srcc/touxiang.jpg",
							username:"Vincent",
							isguanzhu:false,
							title:"快快乐乐敲代码就对了",
							type:"video",
							titlepic:"../../static/srcc/3.jpg",
							playnum:20001,
							long:1.22,
							infonum:{
								index:0,
								ding:11,
								cai:11
								
							},
							commentnum:10,
							sharenum:10
						};
					this.newlist[index].list.push(obj);
					this.newlist[index].loadtext="上拉加载更多"
				},1000);
				
		
				//this.newlist[index].loadtext="没有更多数据了";
			}

		},
		/*注册组件*/
		components:{
			indexList,
			swiperTabHead,
			loadMore,
			noThing
			
		},
		//监听原生标题导航按钮的点击事件
		onNavigationBarButtonTap(e) {
			console.log(JSON.stringify(e))
			switch (e.index){
				case 1:
				//打开发布页面
				uni.navigateTo({
					url:'../add-input/add-input'
				});
				
				break;
			}
		},
	
		
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height =res.windowHeight-uni.upx2px(102);
					console.log(res.screenHeight);
					console.log(height);
					this.swiperheight = height;
				}
			});
		}
		
		
	}
</script>
<style scoped>
	.swiper-tab-list {
		color:#969696;
		font-weight: bold;
	}
	.uni-tab-bar{
		border-bottom: 1upx solid #eeeeeeeeeeee;
		
	}
	.uni-tab-bar .active{
		color: #343434;
		/* background-color: #BEBEBE; */
		border-radius: 10upx;
	}
	.active .swiper-tab-line{
		border-bottom: 6upx solid #fede33;
		width: 70upx;
		margin: auto;
		border-top: 6upx solid #FEDE33;
		border-radius:10upx ;
	}
	/* .swiper-box{
		height: 1000upx !important;
	} */
	
</style>

